<#ibizinclude>
../@MACRO/CONTROL/LANGBASE.vue.ftl
</#ibizinclude>
<div class="app-data-view-group">
    <#if ctrl.render??>
    ${ctrl.render.code}
    <#else>
    <template v-if="items.length > 0">
        <template v-for="(group, index) of groups">
            <#if ctrl.groupRender??>
            ${ctrl.groupRender.code}
            <#else>
            <div :key="group + index" class="dataview-group-content" style="<#if ctrl.getGroupWidth() gt 0>width: ${ctrl.getGroupWidth()?c}px;<#else>flex-grow: 1;</#if>">
                <div class="dataview-group-header<#if ctrl.getGroupPSSysCss()??> ${ctrl.getGroupPSSysCss().getCssName()}</#if>">
                    {{ getGroupText(group.name) }}
                    <#if ctrl.getGroupPSUIActionGroup()??>
                    <Poptip trigger="hover" content="content" placement="bottom-end" style="float: right;">
                        <Icon type="md-more" />
                        <div slot="content" class="group-action">
                            <#if ctrl.getGroupPSUIActionGroup().getPSUIActions()??>
                            <#list ctrl.getGroupPSUIActionGroup().getPSUIActions() as action>
                            <div class="group-action-item">
                                <i-button long @click="uiAction('${action.getCodeName()}', $event)">
                                <#if action.getPSSysImage()??>
                                <#if action.getPSSysImage().getImagePath()?length gt 0>
                                <img src="${action.getPSSysImage().getImagePath()}"/>
                                <#else>
                                <i class="${action.getPSSysImage().getCssClass()}"></i>
                                </#if>
                                </#if>
                                ${action.getCaption()}
                                </i-button>
                            </div>
                            </#list>
                            </#if>
                        </div>
                    </Poptip>
                    </#if>
                </div>
                <draggable :list="group.items" group="${ctrl.name}" class="dataview-group-items" @change="onDragChange($event, group.name)">
                    <div v-for="(item, i) in group.items" :key="i" :class="{'dataview-group-item': true, 'is-select': item.isselected}" @click="handleClick(item)" @dblclick="handleDblClick(item)">
                        <#if ctrl.getItemPSLayoutPanel()??>
                        <#assign panel = ctrl.getItemPSLayoutPanel()>
                        <layout_${panel.getName()} name='${panel.name}' :parentRef="_self" :inputData="item"></layout_${panel.getName()}>
                        <#elseif ctrl.itemRender??>
                        ${ctrl.itemRender.code}
                        <#else>
                        {{ item.srfmajortext }}
                        </#if>
                    </div>
                </draggable>
            </div>
            </#if>
        </template>
        <#if ctrl.getGroupQuickPSDEToolbar()??>
        <div class="quick-action">
            <#if ctrl.getGroupQuickPSDEToolbar().getPSDEToolbarItems()??>
            <#list ctrl.getGroupQuickPSDEToolbar().getPSDEToolbarItems() as toolbarItem>
            <div class="quick-action-item" title="${toolbarItem.getCaption()}" @click="${ctrl.getGroupQuickPSDEToolbar().getName()}_click({tag: '${toolbarItem.getName()}'}, $event)">
                <#if toolbarItem.getPSSysImage()??>
                <#if toolbarItem.getPSSysImage().getImagePath()?length gt 0>
                <img src="${toolbarItem.getPSSysImage().getImagePath()}"/>
                <#else>
                <i class="${toolbarItem.getPSSysImage().getCssClass()}"></i>
                </#if>
                <#else>
                <i class="el-icon-menu"></i>
                </#if>
            </div>
            </#list>
            </#if>
        </div>
        </#if>
    </template>
    <template v-else>
        <span class="app-data-empty">{{ $t('<#if langbase??>${langbase}.nodata</#if>') }}</span>
    </template>
    </#if>
  </div>